<template>
    <div class="container">
      <div
        class="image-container"
        @mousewheel.stop="onMouseWheel"
        @mousedown="onMouseDown"
        @mousemove="onMouseMove"
        @mouseleave="onMouseLeave"
        @mouseup="onMouseUp"
      >
   
        <div class="GIS" :style="{ transform: imageTransform }" ref="image">
         1111111111
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imageSrc:'../assets/logo.png',
        scale: 1,
        isDragging: false,
        dragStartX: 0,
        dragStartY: 0,
        imageLeft: 0,
        imageTop: 0,
      };
    },
    computed: {
      imageTransform() {
        return `translate(${this.imageLeft}px, ${this.imageTop}px) scale(${this.scale})`;
      },
    },
    methods: {
      onMouseWheel(event) {
        event.preventDefault();
        const wheelDelta = event.deltaY;
        if (wheelDelta > 0 && this.scale > 0.4) {
          this.scale -= 0.1;
        } else if (wheelDelta < 0) {
          this.scale += 0.1;
        }
      },
      onMouseDown(event) {
        this.isDragging = true;
        this.dragStartX = event.clientX;
        this.dragStartY = event.clientY;
        this.startImageX = this.imageLeft;
        this.startImageY = this.imageTop;
      },
      onMouseMove(event) {
        event.preventDefault();
        if (this.isDragging) {
          const offsetX = event.clientX - this.dragStartX;
          const offsetY = event.clientY - this.dragStartY;
          this.imageLeft = this.startImageX + offsetX;
          this.imageTop = this.startImageY + offsetY;
        }
      },
      onMouseUp() {
        this.isDragging = false;
      },
      onMouseLeave() {
        this.isDragging = false;
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  .image-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .GIS {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    max-width: 100%;
    max-height: 100%;
  }
  </style>
  
  